<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.js"></script>
   <style>
       *{
           margin:0 ;
           padding: 0;
       }
       .goods-ul {
            list-style: none;
            width: 800px;
            height: 1000px;
            margin: auto;
            border: 1px solid #666;
        }
        .goods-ul li.goods-li {
            float: left;
            width: 250px;
            border: 1px solid #999;
            margin: 5px;
        }
        .goods-ul li.goods-li.active {
            box-shadow: 0px 10px 10px #999;
        }
        .goods-name {
            height: 70px;
        }
   </style>
</head>
<body>
   <ul class="goods-ul">

   </ul>
</body>
<script src="./data.js"></script>
<script> 
console.log(data)
    $(function(){
// 便历元素方法一
            var liStr = '';
            //ul元素
            var $goodsUl = $('.goods-ul');
            console.log($goodsUl[0]);
            
            $.each(data,function(i,item){
                var id = item.id
                liStr += "<li class='goods-li' sku="+ id +">"+
                    `<a href=./01.商品详情2.0.html?id=${id}><img width='200' src=https:${item.image} /></a>`+
                    "<div class='goods-name'>"+item.name+"</div>"+
                    "<div class='goods-brand'>品牌: "+ item.brandName +"</div>" +
                    "</li>"
            })
            $goodsUl.html(liStr);
            $goodsUl.on('mouseenter','.goods-li',function(){
                $(this).addClass('active');
            })
            $goodsUl.on('mouseleave','.goods-li',function(){
                $(this).removeClass('active');
            })
            $goodsUl.on('click','.goods-li',function(){
                var id = $(this).attr('sku');
                location.href = './01.商品详情2.0.html?id'+id;
            })
    })
</script>
</html>